﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EffectHandle.aspx.cs" Inherits="WebAvalon.View.EffectHandle" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/dist/avalon.js"></script>
    <style>
        table {
            width: 300px;
            border-collapse: collapse;
            border: 1px solid red;
        }

        td {
            padding: 5px;
            border: 1px solid red;
        }

        .menu {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 140px;
            padding: 5px 20px;
            text-align: center;
            margin-left: 1em;
            border: 1px solid greenyellow;
        }

        .btn {
            padding: 5px 20px;
            margin-left: 1em;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form id="form1" ms-controller="test">
        <div ms-controller="tes" class="ms-controller">
            <p>{{@tes}}</p>
        </div>
        <table ms-visible="!@toggle" border="1">
            <tr ms-visible="!@toggle">
                <td>1111</td>
                <td>1111</td>
            </tr>
            <tr>
                <td>1111</td>
                <td>1111</td>
            </tr>
        </table>
        <table border="1">
            <tr ms-visible="@toggle">
                <td>aaa</td>
                <td>bbb</td>
            </tr>
            <tr>
                <td ms-visible="@toggle">ccc</td>
                <td>ddd</td>
            </tr>
        </table>
        <table border="1">
            <tr ms-for="el in @array">
                <td ms-visible="!@toggle">{{el}}</td>
                <td ms-visible="!@toggle">{{el+3+"$"}}</td>
                <h1>{{@tes}}</h1>
            </tr>
        </table>
    </form>
    <div style="display: none" class="menu" ms-visible="@toggle">item</div>
    <button style="display: none" class="btn" type="button" ms-visible="@toggle">btn</button>
    <p>
        <input type="button" ms-click="@toggle = !@toggle" value="click me">
    </p>
    <h3>-----------------------测试选项卡--------------------------------------</h3>
     <style>
            button{
                margin:1em 3em;
            }
            .panel div{
                height:200px;
                background: #a9ea00;
            }
            .panel p{
                height:200px;
                background: green;
            }
            .panel span{
                display:block;
                width:100%;
                height:200px;
                background: #999;
            }
        </style>
    <div ms-controller="tabs" >
        <div>
            <button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button>
        </div>
        <div class='panel' ms-for='(jj, el) in @panels' ms-visible='jj === @curIndex' ms-html='el'></div>
    </div>
</body>
<script>
    var vm3434 = avalon.define
    (
    {
        $id: "test",
        toggle: false,
        array: [1, 3, 5, 6, 7, 9],
        tes: "!@#$%$#^&*("
    })
    var vm133 = avalon.define(
        {
            $id: "tes",
            toggle: false,
            array: [1, 4, 2, 4, 5],
            tes: "？？？"
        })
    var tabss = avalon.define({
        $id: "tabs",
        curIndex: 0,
        buttons:[1,2,3],
        panels: ["<div>面板1</div>", "<p>面板2</p>","<span>面板3</span>"]
    })
</script>
</html>
